<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Hawaii App</title>
<link href="master.css" rel="stylesheet" type="text/css"/>
<link href="../jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="../jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="../jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script type="application/x-javascript"> 
     
   addEventListener("load", function() 
   { 
   setTimeout(updateLayout, 0); 
   }, false); 
   
   var currentWidth = 0; 
   
   function updateLayout() 
   { 
   if (window.innerWidth != currentWidth) 
   { 
   currentWidth = window.innerWidth; 
   
   var orient = currentWidth == 320 ? "profile" : "landscape"; 
   document.body.setAttribute("orient", orient); 
   setTimeout(function() 
   { 
   window.scrollTo(0, 1); 
   }, 100); 
   } 
   } 
   
   setInterval(updateLayout, 100); 
</script> 
</head> 
<body> 

<div data-role="page" id="page">
	<div data-role="header">
		<h1>Visit Hawaii</h1>
	</div>
	<div data-role="content">
    		<img src="images/DSCN0162.JPG"/>
		<ul data-role="listview">
			<li><a href="#page2">Honolulu</a></li>
            <li><a href="#page3">Pearl Harbor</a></li>
			<li><a href="#page4">Hanauma Bay</a></li>
		</ul>		
	</div>
	<div data-role="footer">
		<h4>thejasonlewis.com</h4>
	</div>
</div>

<div data-role="page" id="page2">
	<div data-role="header">
		<h1>Honolulu</h1>
	</div>
	<div data-role="content">
    	<p>Map<br/>
        with icons for other albums	</p>
		<ul data-role="listview">
			<li><a href="#page2">Beaches</a></li>
            <li><a href="#page3">Resturaunts</a></li>
			<li><a href="#page4">Shopping</a></li>
		</ul>	
	</div>
	<div data-role="footer">
		<h4>thejasonlewis.com</h4>
	</div>
</div>

<div data-role="page" id="page3">
	<div data-role="header">
		<h1>Pearl Harbor</h1>
	</div>
	<div data-role="content">	
		<p>map of the harbor</p>
        <ul data-role="listview">
			<li><a href="#page2">Pictures</a></li>
            <li><a href="#page3">Hours</a></li>
		</ul>	
	</div>
	<div data-role="footer">
		<h4>thejasonlewis.com</h4>
	</div>
</div>

<div data-role="page" id="page4">
	<div data-role="header">
		<h1>Hanauma Bay</h1>
	</div>
	<div data-role="content">	
		<p>Map of the bay</p>
	</div>
	<div data-role="footer">
		<h4>thejasonlewis.com</h4>
	</div>
</div>

</body>
</html>
